<template>
  <!-- 废弃申请列表 -->
  <div class="app-container">
    <!-- 原来的表格 -->
    <!-- <el-table v-loading="loading" :data="bugsList" ref="bugTable" :row-key="getRowKey"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" :reserve-selection="true" :selectable="selectable" width="55" align="center" />
      <el-table-column label="机型" fixed align="center" prop="model" />
      <el-table-column label="项目编码" fixed align="center" prop="projectNo" />
      <el-table-column label="芯片组" fixed align="center" prop="chipGroup" />
      <el-table-column label="AD板" fixed align="center" prop="adBoard" />
      <el-table-column label="LCM/OC" fixed align="center" prop="lcmOc" />
      <el-table-column label="电源/适配器" fixed align="center" prop="powerSupply" />
      <el-table-column label="责任人" align="center" prop="respon" />
      <el-table-column label="bug状态" align="center" prop="bugStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bugs_status" :value="scope.row.bugStatus" />
        </template>
</el-table-column>
<el-table-column label="bug编码" width="125" align="center" prop="bugCode" />
<el-table-column label="创建人" align="center" prop="createUserName" />
<el-table-column label="问题类别" align="center" prop="problemType" />
<el-table-column label="提出时间" align="center" prop="createTime">
  <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
</el-table-column>
<el-table-column label="严重程度" align="center" prop="level">
  <template slot-scope="scope">
          <dict-tag :options="dict.type.problem_level" :value="scope.row.level" />
        </template>
</el-table-column>
<el-table-column label="设备型号" align="center" prop="modelCode" />
<el-table-column label="不良率" align="center" prop="badPersentage" />
<el-table-column label="操作" align="left" width="190" class-name="small-padding fixed-width" fixed="right">
  <template slot-scope="scope">
          <el-button size="mini" type="primary" :disabled="!multiple"
            v-show="scope.row.bugStatus !== 30 && scope.row.bugStatus !== 40" @click="handleTransfer(scope.row)"
            v-hasPermi="['business:bugs:transfer']">转办</el-button>
          <el-button size="mini" type="warning" :disabled="!multiple"
            v-show="scope.row.bugStatus !== 30 && scope.row.bugStatus !== 40" @click="handleWaive(scope.row)"
            v-hasPermi="['business:bugs:waive']">Waive</el-button>
          <el-button size="mini" type="success" :disabled="!multiple"
            v-show="scope.row.bugStatus == 20 && scope.row.bugStatus !== 40 && scope.row.bugStatus !== 30"
            @click="handleClose(scope.row)" v-hasPermi="['business:bugs:close']">关闭</el-button>
          <el-button size="mini" type="danger" :disabled="!multiple" v-show="scope.row.bugStatus == 10"
            @click="handleDelete(scope.row)" v-hasPermi="['business:bugs:remove']">删除</el-button>
          <el-button size="mini" type="info" @click="handleCopy(scope.row)"
            v-hasPermi="['business:bugs:copy']">复制</el-button>
          <el-button size="mini" type="success" v-show="scope.row.bugStatus == 30" @click="handleReset(scope.row)"
            v-hasPermi="['business:bugs:reset']">重置</el-button>
          <el-button size="mini" type="success" v-show="scope.row.bugStatus == 40" @click="handleActivation(scope.row)"
            v-hasPermi="['business:bugs:activation']">激活</el-button>
          <el-button size="mini" type="success" play :disabled="!multiple"
            v-show="scope.row.bugStatus !== 30 && scope.row.bugStatus !== 40" @click="handleUpdate(scope.row)"
            v-hasPermi="['business:bugs:edit']">修改</el-button>
        </template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
  @pagination="getList" /> -->
    <el-button type="warning" plain size="mini" @click="handleWaive" :disabled="multiple"
      v-hasPermi="['business:bugs:waive']">批量Waive</el-button>
    <el-button type="warning" size="mini" @click="clearSelection" v-if="!multiple">清除多选数据</el-button>
    <right-toolbar :columns="columns2" :search="false" @queryTable="resetQuery" :isCallback="true"
      @callBack="updateTableColum"></right-toolbar>
    <vxe-table border :loading="loading" :data="bugsList" :scroll-y="{ enabled: false }" keep-source
      :keyboard-config="{ isArrow: true }"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: false }"
      :column-config="{ useKey: true, resizable: true }" :row-config="{ useKey: true }" ref="bugTable"
      @checkbox-change="selectChangeEvent" @checkbox-all="selectChangeEvent" @cell-dblclick="cellClickEvent"
      :checkbox-config="{ checkMethod: checCheckboxkMethod }">
      <vxe-column type="checkbox" width="30"></vxe-column>
      <vxe-column field="projectNo" title="项目编码" width="110">
        <template #header>
          <i :class="collapsable1 ? 'vxe-icon-square-minus' : 'vxe-icon-square-plus'" @click="collapsable1Event"></i>
          <span>项目编码</span>
        </template>
        <!-- <template #edit="{ row }">
          <vxe-input v-model="row.projectNo" type="text" placeholder="请输入项目编码"></vxe-input>
        </template> -->
      </vxe-column>
      <vxe-column field="model" title="机型" :visible="false" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.model" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="chipGroup" :visible="false" title="芯片组" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.chipGroup" type="text" placeholder="请输入芯片组"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="adBoard" :visible="false" title="AD板" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.adBoard" type="text" placeholder="请输入AD板"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="lcmOc" :visible="false" title="LCM/OC" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.lcmOc" type="text" placeholder="请输入LCM/OC"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="powerSupply" :visible="false" title="电源/适配器" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.powerSupply" type="text" placeholder="请输入电源/适配器"></vxe-input>
        </template>
      </vxe-column>

      <vxe-column field="level" title="严重程度" width="60">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.problem_level" :value="scope.row.level" />
        </template>
      </vxe-column>
      <!--  :edit-render="{}" -->
      <vxe-column field="descriptions" type="html" title="bug描述" width="250">
        <template #edit="{ row }">
          <span v-html="row.descriptions"></span>
        </template>
        <!-- <template #header>
          <i :class="collapsable3 ? 'vxe-icon-square-minus' : 'vxe-icon-square-plus'" @click="collapsable3Event"></i>
          <span>bug描述</span>
        </template> -->
      </vxe-column>

      <vxe-column field="bugStatus" title="bug状态" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bugs_status" :value="scope.row.bugStatus" />
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.bugStatus" transfer :disabled="showHandleStatus0" clearable filterable
            @change="changeBugStatus($event, row)">
            <vxe-option v-for="item in dict.type.bugs_status" :key="item.value" :value="item.value" :label="item.label"
              :disabled="item.value == '30'"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>

      <!-- <vxe-column field="bugVersion" title="最新处理版本" :edit-render="{ autofocus: '.vxe-input--inner' }" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.bugVersion" :disabled="showHandleStatus0 && showHandleStatus1" type="text"
            placeholder="请输入处理/验证版本"></vxe-input>
        </template>
      </vxe-column> -->

      <!-- 工程师回复展示 -->
      <!-- <vxe-column field="analysis" title="bug分析" :edit-render="{ autofocus: '.vxe-input--inner' }" width="250">
        <template #edit="{ row }">
          <vxe-textarea v-model="row.analysis" :disabled="showHandleStatus1" placeholder="请输入bug分析"
            show-word-count></vxe-textarea>
        </template>
      </vxe-column>
      <vxe-column field="answer" title="改善对策" :edit-render="{ autofocus: '.vxe-input--inner' }" width="250">
        <template #edit="{ row }">
          <vxe-textarea v-model="row.answer" :disabled="showHandleStatus1" placeholder="请输入改善对策"
            show-word-count></vxe-textarea>
        </template>
      </vxe-column>
      
      <vxe-column field="newDescriptions" title="buglist最新问题描述" :edit-render="{ autofocus: '.vxe-input--inner' }"
        width="250">
        <template #edit="{ row }">
          <vxe-textarea v-model="row.newDescriptions" :disabled="showHandleStatus0" placeholder="请输入buglist最新问题描述"
            show-word-count></vxe-textarea>
        </template>
      </vxe-column>

      <vxe-column field="rdHandle" title="指派人" :edit-render="{}" width="180">
        <template #default="{ row }">
          <vxe-select v-model="row.rdHandle" :disabled="showHandleStatus0 || showHandleStatus1" multiple transfer
            clearable filterable>
            <vxe-option v-for="item in rdHandleList" :key="item.userId" :value="item.userId"
              :label="item.userName"></vxe-option>
          </vxe-select>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.rdHandle" :disabled="showHandleStatus0" multiple transfer clearable filterable>
            <vxe-option v-for="item in rdHandleList" :key="item.userId" :value="item.userId"
              :label="item.userName"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column> -->
      <vxe-column field="waiveCause" title="废弃原因" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.waiveCause" type="text" placeholder=""></vxe-input>
        </template>
      </vxe-column>
      
      <vxe-column field="correctiveAction" title="纠正措施" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.correctiveAction" type="text" placeholder=""></vxe-input>
        </template>
      </vxe-column>

      <vxe-column field="problemType" title="问题类别" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.problem_type" :value="scope.row.problemType" />
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.problemType" transfer :disabled="showHandleStatus0" clearable filterable>
            <vxe-option v-for="item in dict.type.problem_type" :key="item.value" :value="item.value"
              :label="item.label"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="respon" title="责任人" width="120">
        <template #edit="{ row }">
          <vxe-input v-model="row.respon" type="text" placeholder="请输入责任人"></vxe-input>
        </template>
      </vxe-column>

      <vxe-column field="modelCode" title="设备型号" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.modelCode" type="text" placeholder=""></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="badPersentage" title="不良率" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.badPersentage" type="text" placeholder=""></vxe-input>
        </template>
      </vxe-column>

      <vxe-column field="bugCode" title="bug编码" width="120">
        <template #header>
          <i :class="collapsable2 ? 'vxe-icon-square-minus' : 'vxe-icon-square-plus'" @click="collapsable2Event"></i>
          <span>bug编码</span>
        </template>
      </vxe-column>

      <vxe-column field="createUserName" :visible="false" title="创建人" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.createUserName" type="text" placeholder=""></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="createTime" :visible="false" title="提出时间" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </vxe-column>
      <vxe-column field="lcmOcId" :visible="false" title="lcm/Oc标识" width="100">
        <template #edit="{ row }">
          <vxe-input v-model="row.lcmOcId" type="text" placeholder=""></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="powerSuppleId" :visible="false" title="电源/适配器标识" width="120">
        <template #edit="{ row }">
          <vxe-input v-model="row.powerSuppleId" type="text" placeholder=""></vxe-input>
        </template>
      </vxe-column>

      <vxe-column title="操作" fixed="right" width="58">
        <template #default="{ row }">
          <vxe-button status="warning" size="mini" :disabled="!multiple" v-hasPermi="['business:bugs:waive']"
            @click="handleWaive(row)">waive</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 分页 -->
    <vxe-pager border size="medium" :loading="loading" :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize" :total="total"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange2">
    </vxe-pager>

  </div>
</template>

<script>
import { getApproveWaiveBugList,waiveBugs } from "@/api/business/bugs"
export default {
  name: 'ApplyForWaive',
  dicts: ['bugs_status', 'problem_level', 'problem_type'],
  data() {
    return {
      collapsable1: false,
      collapsable2: false,
      collapsable3: false,
      columns2: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 项目bugs列表格数据
      bugsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pid: null,
        bugCode: null,
        problemType: null,
        identify: null,
        level: null,
        modelCode: null,
        badPersentage: null,
        bugTitle: null,
        bugVersion: null,
        exceptionType: null,
        exceptionCode: null,
        respon: null,
        rdHandle: null,
        bugStatus: null,
        handleStatus: null,
        param: null,
        model: null,
        projectNo: null,
        chipGroup: null,
        adBoard: null,
        lcmOc: null,
        powerSupply: null,
        powerSuppleId: null,
        lcmOcId: null,
      },
    };
  },
  mounted() {
    //初始化表格显示的字段
    this.initColums()
  },
  watch: {
  },
  created() {
    this.getList();
  },
  methods: {

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        pid: null,
        bugCode: null,
        problemType: null,
        identify: null,
        level: null,
        modelCode: null,
        badPersentage: null,
        bugTitle: null,
        bugVersion: null,
        exceptionType: null,
        exceptionCode: null,
        respon: null,
        rdHandle: null,
        bugStatus: null,
        handleStatus: null,
        param: null,
        model: null,
        projectNo: null,
        chipGroup: null,
        adBoard: null,
        lcmOc: null,
        powerSupply: null,
        powerSuppleId: null,
        lcmOcId: null,
      }
      this.getList()
    },
    updateTableColum(data) {
      // console.log(data)
      if (this.$refs.bugTable) {
        this.$refs.bugTable.refreshColumn()
      }
    },
    //初始化表格显示的字段
    initColums() {
      this.$nextTick(() => {
        this.columns2 = this.$refs.bugTable.getColumns()
        // console.log(this.columns2)
        this.columns2 = this.columns2.filter(item => {
          return item.field && item.field != 'projectNo' && item.field != 'bugCode'
            && item.field != 'bugStatus' && item.field != 'bugStatus' && item.field != 'bugVersion'
            && item.field != 'analysis' && item.field != 'answer' && item.field != 'rdHandle' && item.field != 'problemType'
        })
        for (let item of this.columns2) {
          item.label = item.title
        }
      })
    },
    //单元格点击展开/显示隐藏字段
    cellClickEvent({ column }) {
      // console.log(column)
      if (column.field && column.field == 'projectNo') {
        this.collapsable1Event()
      } else if (column.field && column.field == 'bugCode') {
        this.collapsable2Event()
      }
    },

    //隐藏/显示字段点击事件
    collapsable1Event() {
      const fields = ['model', 'chipGroup', 'adBoard', 'lcmOc', 'powerSupply']
      this.collapsable1 = !this.collapsable1
      const bugTable = this.$refs.bugTable
      fields.forEach(field => {
        const column = bugTable.getColumnByField(field)
        column.visible = this.collapsable1
      })
      bugTable.refreshColumn()
      this.initColums()
    },
    collapsable2Event() {
      const fields = ['createUserName', 'createTime', 'lcmOcId', 'powerSuppleId', 'powerSupply']
      this.collapsable2 = !this.collapsable2
      const bugTable = this.$refs.bugTable
      fields.forEach(field => {
        const column = bugTable.getColumnByField(field)
        column.visible = this.collapsable2
      })
      bugTable.refreshColumn()
      this.initColums()
    },
    collapsable3Event() {
      const fields = ['modelCode', 'badPersentage']
      this.collapsable3 = !this.collapsable3
      const bugTable = this.$refs.bugTable
      fields.forEach(field => {
        const column = bugTable.getColumnByField(field)
        column.visible = this.collapsable3
      })
      bugTable.refreshColumn()
    },
    //多选禁止勾选
    checCheckboxkMethod({ row }) {
      if (this.activeIndex1 == '5') {//已处理页面不能勾选多选框
        return false
      } else {
        if (row.bugStatus == 30 || row.bugStatus == 40) {
          return false
        } else {
          return true
        }
      }

    },
    //多选框选择时件
    selectChangeEvent({ checked }) {
      const records = this.$refs.bugTable.getCheckboxRecords()
      this.ids = records.map(item => item.id);
      // this.single = records.length !== 1;
      this.multiple = !this.ids.length
      this.queryParams.ids = this.ids
    },
    //分页方法
    handlePageChange2({ currentPage, pageSize }) {
      this.queryParams.pageNum = currentPage
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    getList() {
      getApproveWaiveBugList(this.queryParams).then(response => {
        this.bugsList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    handleWaive(row) {
      const id = row.id
      const ids = this.ids
      let param = {}
      param.id = id
      param.ids = ids
      this.$modal.confirm('是否确认Waive所选的数据项？').then(function () {
        return waiveBugs(param);
      }).then(
        response => {
          this.getList();
          this.$modal.msgSuccess("Waive成功");
          if (this.ids) {
            this.clearSelection()
          }
        }
      ).catch(() => { });
    },
    //清除多选数据
    clearSelection() {
      // this.$refs.bugTable.clearSelection();
      if (Array.from(this.ids).length > 0) {
        this.$refs.bugTable.clearCheckboxRow()
        this.ids = []
        this.multiple = !this.ids.length
      }
    },
    //回显id
    getRowKey(row) {
      return row.id
    },
  },
};
</script>

<style scoped></style>
